<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<!-- https://vuejs.bootcss.com/guide/components-slots.html#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD -->
<div id="app">
    <soncpn>
        <template slot-scope="data">
                <span v-for="(item, index) in data.baochiyizhi"
                      :key="index">{{ item }}&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;</span>
        </template>
    </soncpn>
    <hr/>
    <soncpn>
        <template slot-scope="diy">
            <span>{{ diy.baochiyizhi.join(' = ') }}</span>
        </template>
    </soncpn>
    <hr/>
    <soncpn>
        <template slot-scope="soncpn">
            <p v-for="(item, index) in soncpn.baochiyizhi" :key="index">{{ item + '   ===  ' + index }}</p>
        </template>
    </soncpn>
    <hr/>
    <soncpn>
        <template v-slot="diydata">
            <h5 v-for="(item, index) in diydata.baochiyizhi">{{ item }}</h5>
        </template>
    </soncpn>
</div>
</body>
<template id="soncpn">
    <div>
        <h2>我是子组件</h2>
        <slot :baochiyizhi="pLanguage">
            <ul>
                <li v-for="item in pLanguage">{{ item }}</li>
            </ul>
        </slot>
    </div>
</template>
<script src="../js/http_cdn.bootcdn.net_ajax_libs_vue_2.6.6_vue.js"></script>
<script>
    const soncpn = {
        template: "#soncpn",
        data() {
            return {
                pLanguage: ['javaScript', "c++", "c#", "java", "python", "go", "scala"]
            }
        },
    }
    new Vue({
        el: "#app",
        components: {
            soncpn
        }
    })
</script>

</html>
